<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>门店收入报表</title>
    <#include "/common/link.ftl" >
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>

</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl" >


    <#include "/common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>门店收入报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <div style="margin: 10px;">
                    <div>${typeName}收入柱状图</div>
                    <div id="main" style="width: 1400px;height:700px;"></div>

                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999'
                                    }
                                }
                            },
                            toolbox: {
                                feature: {
                                    dataView: {show: true, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            legend: {
                                data: ['总消费金额', '总实收金额', '总优惠金额','总订单数']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    //分组类型
                                    data: ${businessName},
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    //左纵坐标
                                    type: 'value',
                                    name: '金额',
                                    min: 0,
                                    axisLabel: {
                                        formatter: '{value} 元'
                                    }
                                },
                                {
                                    //右纵坐标
                                    type: 'value',
                                    name: '数量',
                                    min: 0,
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                }
                            ],
                            series: [
                                {
                                    //总消费金额分组
                                    name: '总消费金额',
                                    type: 'bar',
                                    data: ${totalAmount}
                                },
                                {
                                    //总实收金额分组
                                    name: '总实收金额',
                                    type: 'bar',
                                    data: ${totalPayAmount}
                                },
                                {
                                    //总优惠金额分组
                                    name: '总优惠金额',
                                    type: 'bar',
                                    data: ${totalDiscountAmount}
                                },
                                {
                                    //总订单数
                                    name: '总订单数',
                                    type: 'line',
                                    yAxisIndex: 1,
                                    data: ${totalCount}
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>

                    <#include "/common/page.ftl">
                </div>
            </div>
        </section>
    </div>
    <#include "/common/footer.ftl">
</div>

<!-- Modal模态框 -->
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="padding: 20px">

        </div>
    </div>
</div>

</body>
</html>